Skip to content

fix(Button): Apply inline-flex display to loading wrapper for link variant#7690

Open
Copilot wants to merge 4 commits intomainfrom
copilot/fix-inline-flex-loading-wrapper
Open

fix(Button): Apply inline-flex display to loading wrapper for link variant#7690
Copilot wants to merge 4 commits intomainfrom
copilot/fix-inline-flex-loading-wrapper

Conversation

Copy link
Contributor

Copilot AI commented Mar 23, 2026

Button with variant="link" sets display: inline-flex on the button itself, but when loading is used, the button is wrapped in a <div data-loading-wrapper> that defaults to block display, breaking inline layout.

This adds a ConditionalWrapperLink CSS class (display: inline-flex) applied to the wrapper when variant === 'link'.

// Previously, the wrapping div broke inline flow
<Button variant="link" loading>Save</Button>

Changelog

New

Changed

  • ButtonBase.module.css: Added .ConditionalWrapperLink { display: inline-flex } class
  • ButtonBase.tsx: Conditionally apply wrapper class via clsx(block && classes.ConditionalWrapper, variant === 'link' && classes.ConditionalWrapperLink)

Removed

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Unit test added verifying the loading wrapper receives the ConditionalWrapperLink class when variant="link".

Merge checklist

@HiroAgustin
fix(Button): apply inline-flex display to loading wrapper for link va…
21e2e7a 
…riant

When a Button with variant="link" uses the loading prop, the
data-loading-wrapper div now gets display: inline-flex to preserve
inline behavior.

Co-authored-by: HiroAgustin <1458873+HiroAgustin@users.noreply.github.com>
Agent-Logs-Url: https://github.com/primer/react/sessions/54244975-bac3-490e-8119-69589a0d92dc
@HiroAgustin HiroAgustin marked this pull request as ready for review March 23, 2026 12:43
@HiroAgustin HiroAgustin requested a review from a team as a code owner March 23, 2026 12:43
@github-actions
Copy link
Contributor

github-actions bot commented Mar 23, 2026

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Mar 23, 2026
hectahertz
hectahertz approved these changes Mar 23, 2026
View reviewed changes
Copy link
Contributor

@hectahertz hectahertz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! We may want to check integration tests just in case as it changes the layout

Copilot AI reviewed Mar 23, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes inline layout regressions for Button when variant="link" is used together with the loading prop by ensuring the loading wrapper can be inline-level.

Changes:

  • Add a new CSS Module class to make the loading wrapper display: inline-flex for link-variant buttons.
  • Conditionally apply the new wrapper class in ButtonBase when variant === 'link'.
  • Add a unit test and a patch changeset entry for the behavior.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File Description
packages/react/src/Button/ButtonBase.tsx Applies conditional wrapper class for link variant when loading wrapper is present.
packages/react/src/Button/ButtonBase.module.css Adds .ConditionalWrapperLink { display: inline-flex; } for the wrapper.
packages/react/src/Button/tests/Button.test.tsx Verifies the loading wrapper receives the link wrapper class.
.changeset/fix-link-loading-wrapper.md Adds patch changeset documenting the fix.

@github-actions github-actions bot temporarily deployed to storybook-preview-7690 March 23, 2026 12:52 Inactive
@HiroAgustin
Update packages/react/src/Button/ButtonBase.tsx
54dcf6c 
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
@changeset-bot
Copy link

changeset-bot bot commented Mar 23, 2026 •
edited
Loading

🦋 Changeset detected

Latest commit: ab50f74

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@primer
Copy link
Contributor

primer bot commented Mar 23, 2026

🤖 Lint and formatting issues have been automatically fixed and committed to this PR.

@github-actions github-actions bot temporarily deployed to storybook-preview-7690 March 23, 2026 13:08 Inactive
@HiroAgustin
fix: resolve prettier formatting violation in ButtonBase.tsx (#7691)
ab50f74 
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: HiroAgustin <1458873+HiroAgustin@users.noreply.github.com>
@HiroAgustin
Copy link
Contributor

HiroAgustin commented Mar 23, 2026 •
edited
Loading

Deployed storybook looks good:

Screenshot 2026-03-23 at 14 13 51

I opened the playground, checked loading and selected variant link and added some inline text next to the button.

@github-actions
Copy link
Contributor

github-actions bot commented Mar 23, 2026 •
edited
Loading

Uh oh! @HiroAgustin, at least one image you shared is missing helpful alt text. Check #7690 (comment) to fix the following violations:

  • Images should have meaningful alternative text (alt text) at line 3

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

@github-actions github-actions bot requested a deployment to storybook-preview-7690 March 23, 2026 13:15 Abandoned
@HiroAgustin HiroAgustin enabled auto-merge March 23, 2026 13:16
@primer-integration
Copy link

primer-integration bot commented Mar 23, 2026

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/16663

@primer-integration
Copy link

primer-integration bot commented Mar 23, 2026

Integration test results from github/github-ui:

Passed  CI   Passed
Passed  VRT   Passed
Passed  Projects   Passed

All checks passed!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@hectahertz hectahertz hectahertz approved these changes

@francinelucca francinelucca francinelucca approved these changes

Assignees

@HiroAgustin HiroAgustin

Copilot code review Copilot

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@HiroAgustin @hectahertz @francinelucca